<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>

		<link rel="stylesheet" type="text/css" href="css/registLogin/util.css">
		<link rel="stylesheet" type="text/css" href="css/registLogin/main.css">

		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>

		<style>
			.p-t-85 {
				padding-top: 10px;
			}
			
			.p-b-70 {
				padding-bottom: 35px;
			}
			
			.m-t-85 {
				margin-top: 15px;
			}
			
			.container-login100 {
				padding: 25px;
			}
			/*toast信息提示*/
			
			.mui-toast-container {
				bottom: 50% !important;
			}
			.mui-toast-message {
				opacity: 0.6;
				color: #fff;
				width: 180px;
				padding: 70px 5px 10px 5px;
			}
		</style>
	</head>

	<body>

		<div class="mui-content">
			<div class="container-login100">
				<div class="wrap-login100 p-t-85 p-b-20">
					<form id="userform">
						<span class="login100-form-title p-b-70">
							<h5>EasyChat</h5>
						</span>
						<span class="login100-form-avatar">
							<img id="img_login_face" src="css/registLogin/bear.jpeg" alt="头像">
						</span>

						<div class="wrap-input100 validate-input m-t-85 m-b-35">
							<input class="input100" type="text" id="username" name="username" placeholder="用户名">
							<span class="focus-input100"></span>
						</div>

						<div class="wrap-input100 validate-input m-b-50">
							<input class="input100" type="password" id="txt_password" name="password" placeholder="密码">
							<span class="focus-input100"></span>
						</div>
						<div class="container-login100-form-btn">
							<button type="submit" id="registOrLogin" class="login100-form-btn">
								登录/注册
							</button>
						</div>
					</form>
					
				</div>
			</div>
		</div>
		
		<script src="js/mui.js"></script>
		<script src="js/app.js" ></script>
		<script type="text/javascript">
			
			mui.plusReady(function () {
				
				// 判断用户是否注册登录过，如果本地内存有全局的用户对象，此时直接跳转到首页
				var userInfo = app.getUserGlobalInfo();
				if(userInfo != null){
					//已经登录过
					mui.openWindow("index.html","index.html");
				}
				
			    var userform = document.getElementById("userform");
				var username = document.getElementById("username");
				var txt_password = document.getElementById("txt_password");
				
				//给按钮添加点击事件
				userform.addEventListener("submit",function(e){
					//判断用户名是否为空,如果为空则让其获得焦点
					if(!app.isNotNull(username.value)){
						//为空,获取焦点
						username.focus();
					}else if(!app.isNotNull(txt_password.value)){
						txt_password.focus()
					}else{
						//用户输入了账号和密码,对长度进行限制
						if(username.value.length > 12){
							app.showToast("用户名长度不能超过12位","error");
							return false;
						}else if(txt_password.value.length > 12){
							app.showToast("密码长度不能超过12位","error");
							return false;
						}
					}
				
					//阻止默认事件,阻止原生表单提交
					e.preventDefault();
					
					// 获取每台手机的唯一cid
					var cid = plus.push.getClientInfo().clientid;
					console.log(cid);
					/**
					 * 开启前后端的联调,使用ajax完成交互
					 */
					//此处为controller中前后端交互uri
					mui.ajax(app.serverUrl + '/user/registerOrLogin',{
						//data: 发送到服务器的业务数据,此处为账号和密码
						data:{
							username: username.value,
							password: txt_password.value,
							cid: cid
						},
						dataType:'json',//服务器返回json格式数据
						type:'post',//HTTP请求类型
						timeout:10000,//超时时间设置为10秒；
						headers:{'Content-Type':'application/json'},	              
						success:function(data){
							//服务器返回响应，根据响应结果，分析是否登录成功；后端返回的是JSON
							//console.log(JSON.stringify(data));
							username.blur();
							txt_password.blur();
							//登陆成功,status为200 , 保存全局用户对象到缓存
							if(data.status == 200){
								//获取用户信息(data.data为对象)
								var userInfoJson = data.data;
								//存储用户信息
								app.setUserGlobalInfo(userInfoJson);
								//跳转页面
								mui.openWindow({
									url: "index.html",
									id: "index.html",
									styles:{}
								});
								
							}else{
								//登陆失败,状态码为500
								app.showToast(data.msg,"error");
							}
							
						},
						error:function(xhr,type,errorThrown){
							//异常处理；
							console.log(type);
						}
					});
				})

			})
				
		</script>
	</body>

</html>